<template>
  <div>
    <!-- 修改商品 -->

    <el-form
      ref="form"
      :model="dataList"
      label-width="120px"
      size="mini"
      class="frame"
    >
      <el-form-item label="商品图片">
        <el-upload
          :file-list="imgs"
          action="http://localhost:9000/upload"
          list-type="picture-card"
          :on-success="uploadSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dataList.cover" alt="" />
        </el-dialog>
      </el-form-item>

      <el-form-item label="商品名称">
        <el-input v-model="dataList.title"></el-input>
      </el-form-item>
      <el-form-item label="商品类名">
        <el-input v-model="dataList.type"></el-input>
      </el-form-item>
      <!-- 添加款式和价格 -->
      <el-form-item label="款式和价格">
        <template>
          <span class="cc">
            <el-input v-model="dataList.modul"></el-input>
            <el-input v-model="dataList.price"></el-input>
          </span>
        </template>
      </el-form-item>
      <!--  -->
      <el-form-item label="商品描述">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="dataList.detail"
        >
        </el-input>
      </el-form-item>

      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">立即修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <!--  -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgs: [],
      dataList: {
        cover: "",
      },
      items: [],
      dialogImageUrl: "",
      dialogVisible: false,

      textarea: "",
      options: [],
      value: [],
    };
  },
  methods: {
    uploadSuccess(file, fileList) {
      // console.log(file, fileList);
      this.dataList.cover = file.data;
      this.dataList.pic = file.data;
    },

    onSubmit() {
      // console.log(this.dataList);
      let params = this.dataList;
      this.$http.commidityApi.update(params).then((res) => {
        // console.log(res);
      });
    },
  },
  mounted() {
    // console.log(this.$route.params.id);
    let params = { pid: this.$route.params.id };
    this.$http.commidityApi.queryById(params).then((res) => {
      // console.log(res);
      this.dataList = res.data.data;

      this.options.push({
        value: Math.random(),
        label: res.data.data.modul,
      });
      this.imgs.push({ name: Math.random(), url: res.data.data.cover });

      // console.log(this.dataList);
    });
  },
};
</script>

<style lang="scss" scoped>
.frame {
  width: 700px;
}

.cc {
  display: flex;
}
button {
  background: #010101 !important;
  border-color: #010101 !important;
  color: #fff;
}
</style>
